<style scoped lang="less">
	.sortMenuBox{
		.menuBox{
			min-width: 200px;
			width: 10%;
			height: 100%;
			background-color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			overflow: scroll;
			.menuItemBox{
				background: #fff;
				text-align: left;
				border-bottom: 0.5px solid #e0e0e0;
				height: 3.125rem;
				line-height: 3.125rem;
				font-size: 1rem;
				padding-left: 20px;
				.iconfont{
					margin-right: 5px;
				}
				.iconAdd{
					position: absolute;
					right: 0;
					margin-right: 20px;
					font-size: 10px;
				}
			}
			// .sortable-chosen{}
			.sortable-ghost{
				box-shadow:none;
				background-color: #ebfcfb;
				color: #ebfcfb;
				border: 1px dotted #63c5ce;
			}
			
			.btnBox{
				position: fixed;
				bottom: 0;
				min-width: 200px;
				width: 10%;
				text-align: right;
				padding-right: 20px;
				background-color: #fff;
				line-height: 50px;
			}
		}
		.shadowRegion{
			display: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.7);
		}
	}
</style>

<template>
	<div class="sortMenuBox" > 
		<div class="shadowRegion"></div>
		<div class="menuBox" v-loading='loading'>
			<draggable v-model="menuList">
				<div v-for="item in menuList" :key="item.id" class="menuItemBox">
					<i class="iconfont" v-html='item.icon'></i> 
					{{item.label}}
					<i class="iconfont iconAdd" >&#xe60c;</i>
				</div>
			</draggable>

			<div class="btnBox">
				<el-button type='text' @click='handleSortMeun(false)'>取消</el-button>
				<el-button type='text' @click='handleSortMeun(true)'>保存设置</el-button>
			</div>

		</div>

	</div>
</template>

<script>
	import {getMenuListLv1, postSortMenuList } from 'api/common/index.js'
	import draggable from 'vuedraggable'
	export default {
		props:{},
		data(){
			return{
				loading:true,
				menuList:[],
			}
		},
		components:{
			draggable,
		},
		methods:{
			async getMenu(){
				try{
					let back = await getMenuListLv1()
					back = back.data;
					// console.warn(back)
					this.loading = false
					if(back.resultCode === '200'){
						this.menuList = back.result;
					}
				}catch(e){
					this.loading = false;
					this.$alert('获取失败' )
					console.error(e)
				}
			},
			async postSortMenuList(param){
				try{
					this.loading = true;
					let back = await postSortMenuList(param)
					back = back.data;
					console.warn(back)
					this.loading = false;
					if(back.resultCode === '200'){
						this.$alert('保存成功',{
							callback:action=>{
								this.$emit('handleSortMeun', 1)
							}
						})
					}else{
						this.$alert(back.msg ? back.msg :'保存错误！' )
					}
				}catch(e){
					this.loading = false;
					this.$alert('保存错误！' )
					console.error(e)
				}
			},
			handleSortMeun(e){
				if(e){
					var menuList = this.menuList
					var sortResult =[];
					for(let i =0;i<menuList.length;i++){
						var item ={
							displayOrder:'',
							id:'',
						}
						item.displayOrder = i;
						item.id = menuList[i].id;
						sortResult = sortResult.concat(item)
					}
					this.postSortMenuList(sortResult)
				}else{
					this.$emit('handleSortMeun', 0)
				}
			}
		},
		created(){
			this.getMenu()
		}
	
	}
</script>
